<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '字典测试页面',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <PageLayout navTitle="字典测试页面" backRouteName="people" routeMethod="pushTab">
    <view>
      <h2>这是我展示出来的字典测试</h2>

      <!-- 显示订单列表 -->
      <view class="order-list">
        <view class="order-item" v-for="(item, index) in mocData.result.records" :key="item.id">
          <view class="order-header">
            <text class="order-no">订单号: {{ item.orderNo }}</text>
            <!-- 使用 dictItem 组件 -->
            <dictItem
              dict-code="get_oil_order_status"
              :value="item.status"
              class-name="order-status"
            />
          </view>

          <view class="order-details">
            <view class="detail-row">
              <text class="label">提油类型:</text>
              <!-- 使用 dictItem 组件 -->
              <dictItem dict-code="oil_withdrawal_type" :value="item.oilWithdrawalType" />
            </view>

            <view class="detail-row">
              <text class="label">提油方式:</text>
              <!-- 使用 dictItem 组件 -->
              <dictItem dict-code="oil_withdrawal_way" :value="item.oilWithdrawalWay" />
            </view>

            <view class="detail-row">
              <text class="label">提油总量:</text>
              <text>{{ item.oilWithdrawalTotal }} 升</text>
            </view>

            <view class="detail-row">
              <text class="label">金额:</text>
              <text>¥{{ item.amount }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </PageLayout>
</template>

<script setup lang="ts">
import { http } from '@/utils/http'
import { ref, onMounted } from 'vue'
// 引入 dictItem 组件
import dictItem from '@/components/dictItem/dictItem.vue'

defineOptions({
  name: 'dictTest',
  options: {
    styleIsolation: 'shared',
  },
})

// 模拟数据
const mocData = {
  success: true,
  message: '',
  code: 200,
  result: {
    records: [
      {
        id: '1980825838174076930',
        farmerId: '97',
        tenantId: '63',
        orderNo: 'TY202510220005',
        oilWithdrawalType: 'A',
        oilWithdrawalWay: '1',
        oilWithdrawalTotal: 18,
        status: 'C',
        remark: 'hhhhhhh',
        addressId: '34',
        amount: 217.05,
        expectedDeliveryDate: null,
        createBy: '1980090767162421250',
        createTime: '2025-10-22 10:37:36',
        updateBy: null,
        updateTime: null,
        delFlag: 0,
        factoryName: null,
        farmerName: null,
        productContainerVos: null,
        productRecordVos: null,
        operationLogs: null,
        isPending: 'N',
      },
      {
        id: '1980825699799793666',
        farmerId: '1980090767162421250',
        tenantId: '1004',
        orderNo: 'TY202510220004',
        oilWithdrawalType: 'A',
        oilWithdrawalWay: '1',
        oilWithdrawalTotal: 18,
        status: 'C',
        remark: 'hhhhhhh',
        addressId: '34',
        amount: 217.05,
        expectedDeliveryDate: null,
        createBy: '1980090767162421250',
        createTime: '2025-10-22 10:37:03',
        updateBy: null,
        updateTime: '2025-10-22 10:37:23',
        delFlag: 0,
        factoryName: '万达工厂1',
        farmerName: '美美桑内',
        productContainerVos: null,
        productRecordVos: null,
        operationLogs: null,
        isPending: 'N',
      },
      {
        id: '1980825699799793666',
        farmerId: '1980090767162421250',
        tenantId: '1004',
        orderNo: 'TY202510220004',
        oilWithdrawalType: 'A',
        oilWithdrawalWay: '1',
        oilWithdrawalTotal: 18,
        status: 'C',
        remark: 'hhhhhhh',
        addressId: '34',
        amount: 217.05,
        expectedDeliveryDate: null,
        createBy: '1980090767162421250',
        createTime: '2025-10-22 10:37:03',
        updateBy: null,
        updateTime: '2025-10-22 10:37:23',
        delFlag: 0,
        factoryName: '万达工厂1',
        farmerName: '美美桑内',
        productContainerVos: null,
        productRecordVos: null,
        operationLogs: null,
        isPending: 'N',
      },
      {
        id: '1980825699799793666',
        farmerId: '1980090767162421250',
        tenantId: '1004',
        orderNo: 'TY202510220004',
        oilWithdrawalType: 'A',
        oilWithdrawalWay: '1',
        oilWithdrawalTotal: 18,
        status: 'C',
        remark: 'hhhhhhh',
        addressId: '34',
        amount: 217.05,
        expectedDeliveryDate: null,
        createBy: '1980090767162421250',
        createTime: '2025-10-22 10:37:03',
        updateBy: null,
        updateTime: '2025-10-22 10:37:23',
        delFlag: 0,
        factoryName: '万达工厂1',
        farmerName: '美美桑内',
        productContainerVos: null,
        productRecordVos: null,
        operationLogs: null,
        isPending: 'N',
      },
    ],
    total: 2,
    size: 10,
    current: 1,
    pages: 1,
  },
  timestamp: 1761125113277,
}
</script>

<style scoped>
.order-list {
  padding: 20rpx;
}

.order-item {
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 20rpx;
}

.order-no {
  font-weight: bold;
  color: #333;
}

.order-status {
  color: #ff6600;
  font-size: 28rpx;
}

.detail-row {
  display: flex;
  margin-bottom: 15rpx;
}

.label {
  width: 150rpx;
  color: #666;
  font-weight: bold;
}
</style>
